import classNames from 'classnames'
import './index.scss'
import {useMemo, useState} from "react";
import { billTypeToName } from "@/contants/index.jsx";
import Icon from "@/  components/Icon/index.jsx";

// 从父组件接收2个参数
// eslint-disable-next-line react/prop-types
const DailyBill = ({date,billList}) => {

    const dayResult= useMemo(()=>{
        //支出/收入/结余
        // eslint-disable-next-line react/prop-types
        const pay=billList.filter(item=>item.type==='pay').reduce((a,c)=>a+c.money,0)
        // eslint-disable-next-line react/prop-types
        const income=billList.filter(item=>item.type==='income').reduce((a,c)=>a+c.money,0)
        return {
            pay,income,
            total:pay+income
        }

    },[billList])

    // 控制展开收起
    const  [visible,setVisible]=useState(false)

    return (
        <div className={classNames('dailyBill')}>
            <div className="header">
                <div className="dateIcon">
                    <span className="date">{date}</span>
                    {/*取反操作!visible*/}
                    {/*expand 有这个类名 展开的箭头向上*/}
                    <span className={classNames('arrow',visible && 'expand')} onClick={()=>setVisible(!visible)}  ></span>
                </div>
                <div className="oneLineOverview">
                    <div className="pay">
                        <span className="type">支出</span>
                        <span className="money">{dayResult.pay.toFixed(2)}</span>
                    </div>
                    <div className="income">
                        <span className="type">收入</span>
                        <span className="money">{dayResult.income.toFixed(2)}</span>
                    </div>
                    <div className="balance">
                        <span className="money">{dayResult.total.toFixed(2)}</span>
                        <span className="type">结余</span>
                    </div>
                </div>
            </div>
            {/* 单日列表 */}
            <div className="billList" style={{display:visible?'block':'none'}}   >
                {/* eslint-disable-next-line react/prop-types */}
                {billList.map(item => {
                    return (
                        <div className="bill" key={item.id}>
                            {/*图标*/}
                            <Icon type={item.useFor}/>
                            <div className="detail">
                                {/*适配中文显示*/}
                                <div className="billType">{billTypeToName[item.useFor]}</div>
                            </div>
                            <div className={classNames('money', item.type)}>
                                {item.money.toFixed(2)}
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}
export default DailyBill